在正式進入基礎 JavaScript 之前，必須先初步了解它是如何與網頁中的 HTML、CSS 共同運作的。

HTML、CSS、JS 之間的關連

HTML：網頁的內容，給予頁面完整的內容架構並增加語意。
CSS：網頁的樣式，增強 HTML 頁面的表現方式。
JavaScript：網頁的行為，增加使用者跟網頁之間的互動。

在 JavaScript 程式中，以下這行程式碼很常見：

document.getElementById('input').textContent = "Hello";

從這行程式碼中就可以對略窺 JavaScript 是如何跟網頁共同運作的，以下就來解說這行程式碼是什麼意思。
document — 取得 HTML 文件。這裡的 document 是個物件，代表整個網頁。
getElementById — 在 HTML 文件中透過 id 來找到我想要的元素。getElementById() 是 document 物件中的其中一個方法。
('input') — 我想要找到名為 input 的元素。當方法需要額外的資訊來運作時，會把資訊放在小括號中，此資訊稱為參數。
textContent — 取得這個元素的文字內容。是 HTML 物件中的其中一個屬性。
= "Hello" — 把文字內容設定成 "Hello"。

透過這樣的方式，就可以用 JavaScript 來跟網頁產生互動了。
（關於物件、方法、參數，會在後面的文章中陸續介紹）

id 屬性

當我們學到 HTML、CSS 時，會了解到 id 可以幫助我們指定特定的 HTML 元素並添加樣式，但其實 id 不只可以寫樣式，也是用 JavaScript 操控物件的關鍵屬性，用途例如錨點、改變文字內容（例如上面提到的 textcontent）等。

網頁解析流程

瀏覽器會解析網頁，並把網頁視為一個文件 (document)，裡面的 HTML 元素會形成樹狀圖(DOM 樹)。
解讀完以後，就會由上而下依序顯示出網頁內容。當讀到 JavaScript 檔案的時候，渲染會暫停，因為瀏覽器會先把 JavaScript 程式的內容先執行完，再渲染後面的內容。
所以 JavaScript 檔案要放在 HTML 的最後，body 結束標籤之前。
解譯器 (interpreter) 可以透過它的 JavaScript 引擎幫我們做編譯，並且即時顯示出效果，例如 Chrome 的 V8 引擎。

以上概述了 JavaScript 如何在網頁上運作，下一篇要講的是變數。